<!--
    Simple static Telegram WebApp. Does not verify the WebAppInitData, as a bot token would be needed for that.
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>python-telegram-bot Example WebApp</title>
    <script src="https://telegram.org/js/telegram-web-app.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@jaames/iro@5"></script>
</head>
<script type="text/javascript">
    const colorPicker = new iro.ColorPicker('#picker', {
        borderColor: "#ffffff",
        borderWidth: 1,
        width: Math.round(document.documentElement.clientWidth / 2),
    });
    colorPicker.on('color:change', function (color) {
        document.body.style.background = color.hexString;
    });

    Telegram.WebApp.ready();
    Telegram.WebApp.MainButton.setText('Choose Color').show().onClick(function () {
        const data = JSON.stringify({hex: colorPicker.color.hexString, rgb: colorPicker.color.rgb});
        Telegram.WebApp.sendData(data);
        Telegram.WebApp.close();
    });
</script>
<body style="background-color: #ffffff">
<div style="position: absolute; margin-top: 5vh; margin-left: 5vw; height: 90vh; width: 90vw; border-radius: 5vh; background-color: var(--tg-theme-bg-color); box-shadow: 0 0 2vw
 #000000;">
    <div id="picker"
         style="display: flex; justify-content: center; align-items: center; height: 100%; width: 100%"></div>
</div>
</body>
<script type="text/javascript">
    Telegram.WebApp.expand();
</script>
</html>